<template>
  <!-- 产品栏目管理 -->
  <div>
    <!-- 添加按钮 -->
    <div>
      <el-button type="primary" @click="addCategory">增加</el-button>
    </div>
    <!-- 展示表格 -->
    <div class="showData">
      <el-table :data="CategoryData" style="width: 100%">
        <el-table-column align="center" type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="id" label="栏目标号">
        </el-table-column>
        <el-table-column align="center" prop="name" label="名称">
        </el-table-column>
        <el-table-column align="center" label="图标">
          <template slot-scope="scope">
            <el-tooltip placement="right" effect="light">
              <div slot="content">
                <el-image
                  style="width: 150px; height: 150px"
                  :src="scope.row.icon"
                >
                </el-image>
              </div>
              <el-image style="width: 30px; height: 30px" :src="scope.row.icon">
              </el-image>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="num" label="排序号">
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="info" size="mini" @click="editCategory(scope.row)">
              编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="delectCategory(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      class="pagePosition"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="category_form"
        label-width="100px"
      >
        <el-form-item label="栏目名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="num">
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            v-model="ruleForm.icon"
          >
            <img v-if="imageUrl" :src="ruleForm.icon" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="submitCategory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import { showFileURL, uploadFileURL } from "@/utils/config";
export default {
  data() {
    return {
      //产品信息
      CategoryData: [],
      //页数
      currentPage: 1,
      //页面大小
      pageSize: 8,
      //总条数
      total: 1,
      //模态框显示
      dialogVisible: false,
      //模态框名字
      title: "",
      //规则
      rules: {
        name: [{ required: true, message: "请输入栏目名称", trigger: "blur" }],
        icon: [{ required: true, message: "请选择图片", trigger: "blur" }],
      },
      //表单信息
      ruleForm: { num: "", name: "", icon: "" },
      //图片上传路径
      uploadFileURL,
      //图片预览路径
      imageUrl: "",
    };
  },
  computed: {},
  methods: {
    //增加按钮
    addCategory() {
      this.title = "添加栏目";
      this.dialogVisible = true;
      this.ruleForm = {};
      this.imageUrl = "";
    },
    //编辑按钮
    editCategory(row) {
      this.title = "编辑栏目";
      this.dialogVisible = true;
      this.ruleForm = { ...row };
      this.imageUrl = this.ruleForm.icon;
    },
    //删除按钮
    async delectCategory(id) {
      console.log(id);
      let res = await get("/productCategory/deleteById", { id });
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getCategoryData();
      } else {
        this.$message.error(res.message);
      }
    },
    //模态框验证 上传
    submitCategory() {
      this.$refs["category_form"].validate(async (valid) => {
        if (valid) {
          //发送表单验证请求 提交表单对象
          let res = await post("/productCategory/saveOrUpdate", this.ruleForm);
          //给用户提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            //刷新页码
            this.getCategoryData();
          } else {
            this.$message.error(res.message);
          }
          //调用关闭模态框
          this.dialogClose();
        } else {
        }
      });
    },
    //关闭模态框
    dialogClose() {
      // 关闭
      setTimeout(() => {
        //重置
        this.$refs["category_form"].resetFields();
        this.dialogVisible = false;
      }, 200);
    },
    //上传图片
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.icon = showFileURL + res.data.id;
    },
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
    },
    //表格数据获取
    async getCategoryData() {
      let data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      let res = await get("/productCategory/pageQuery", data);
      // console.log(res);
      this.CategoryData = res.data.list;
      this.total = res.data.total;
    },
    //分页
    //选择每页的数据数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
      this.getCategoryData();
    },
    //页数
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getCategoryData();
    },
  },
  created() {
    this.getCategoryData();
  },
  mounted() {},
};
</script>
<style scoped>
.pagePosition {
  position: fixed;
  bottom: 30px;
  right: 10px;
}
el-image:hover {
  width: 60px;
  height: 60px;
}
</style>